<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        </el-breadcrumb>

        <!--搜索-->
        <div style="margin-top:15px"></div>
        <!-- 搜索筛选 -->
        <el-form :inline="true" :model="dataSearch" class="user-search">
            <el-form-item label="搜索：">
                <el-input clearable size="small" v-model="dataSearch.pname" placeholder="输入商品名"></el-input>
            </el-form-item>


            <el-form-item label="">
            <el-select  size="small" v-model="dataSearch.cid" clearable placeholder="所属目录">
                <el-option
                 v-for="item in options"
                :key="item.cid"
                :label="item.cname"
                :value="item.cid">
                </el-option>
            </el-select>
            </el-form-item>

            

            <el-form-item>
                <el-button size="small" type="danger" icon="el-icon-search" @click="getList">搜索</el-button>
                <el-button size="small" type="primary" icon="el-icon-plus" @click="add">添加</el-button>
            </el-form-item>
        </el-form>


        <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row v-loading="loading"  element-loading-text="拼命加载中" style="width: 100%;">
            
            <el-table-column
            fixed
            width="250px"
              prop="pname"
              label="商品名">
            </el-table-column>
            

            <el-table-column
           width="200px"
              prop="pimage"
              label="商品图片">
               <template slot-scope="scope">
                         <el-image
                            @click="imageClick(scope.row.pimage)"
                            style="width: 100px; height: 100px"
                            :src="url+scope.row.pimage" 
                            fit="contain"></el-image>
              </template>
          </el-table-column>
            

          <el-table-column
           width="100px"
              prop="marketPrice"
              label="原价">
               <template slot-scope="scope">
                        <span style="color:blue">{{scope.row.marketPrice}}￥</span>
              </template>
          </el-table-column>

            
          <el-table-column
           width="100px"
              prop="shopPrice"
              label="销售价格">
               <template slot-scope="scope">
                        <span style="color:red">{{scope.row.shopPrice}}￥</span>
              </template>
          </el-table-column>
          

          
          <el-table-column
           width="100px"
              prop="isHot"
              label="是否热销">
               <template slot-scope="scope">
                        <el-tag :type="scope.row.isHot ==  1 ?'danger':'success'" size="medium">{{ scope.row.isHot == 1 ?'热销':'普通'}}</el-tag>
              </template>
          </el-table-column>
      

          <el-table-column
           width="100px"
              prop="pdate"
              label="上架日期">
          </el-table-column>

            <el-table-column
             width="100px"
              prop="cid"
              label="所属目录">
              <template slot-scope="scope">
                        <span >{{options[scope.row.cid-1].cname}}</span>
              </template>
          </el-table-column>

          <el-table-column
           width="200px"
              prop="pdesc"
              label="详细描述">
          </el-table-column>


           <el-table-column
            width="200px"
            label="操作"
            >
            <template slot-scope="scope">
                <el-button  @click="editClick(scope.row)" type="danger" size="small"><i class="el-icon-edit"/>编辑商品</el-button>
            </template>
        </el-table-column>
    </el-table>


    <!--弹窗-->
    <el-dialog :title="title==1?'添加':'编辑'" :visible.sync="FormVisible" width="30%" @click="FormVisible == true">
        <el-alert
          title="提示~: 所有信息不可以为空！"
          type="success"
          close-text="知道了">
    </el-alert>
      
      <el-form label-width="80px" :model="Form"  ref="editForm">
        <el-form-item label="商品名" >
          <el-input size="small" clearable v-model="Form.pname" auto-complete="off" placeholder="请输入商品名"></el-input>
        </el-form-item>
        <el-form-item label="图片地址" >
          <el-input size="small" clearable v-model="Form.pimage" auto-complete="off" placeholder="products/1/xxx"></el-input>
        </el-form-item>

        <el-form-item label="原价" >
          <el-input size="small" clearable v-model="Form.marketPrice" auto-complete="off" placeholder="5.00￥"></el-input>
        </el-form-item>

        <el-form-item label="销售价格" >
          <el-input size="small" clearable v-model="Form.shopPrice" auto-complete="off" placeholder="5.00￥"></el-input>
        </el-form-item>

       

        <el-form-item label="所属目录" >
          <el-select size="small" v-model="Form.cid" clearable placeholder="所属目录">
                <el-option
                v-for="item in options"
                :key="item.cid"
                :label="item.cname"
                :value="item.cid">
                </el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="描述" >
          <el-input type="textarea" size="small" clearable v-model="Form.pdesc" auto-complete="off" placeholder="商品介绍"></el-input>
        </el-form-item>

        <el-form-item label="是否热销" >
            <el-radio v-model="Form.isHot" label='0'>普通</el-radio>
            <el-radio v-model="Form.isHot" label='1'>热销</el-radio>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        
        <el-button   type="primary" :loading="loadingsubmit" class="title" @click="submitForm()">保存</el-button>
      </div>
    </el-dialog>


    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>

    </div>
</template>
<script>
import Pagination from '../../components/Pagination'
export default {
     components: {
        Pagination
     },
    data() {
        return {
            url:"http://localhost:8080/api/",
            dataSearch:{
                cid:"",     //目录
                pname:"",    //名字
                page:1,
                limit:10
            },
            Form:{       //提交表单
                pname:'',
                pimage:'',
                cid:1,
                pdesc:'',
                shopPrice:'',
                marketPrice:'',
                pid:'',
                isHot: 0
            },
            options:[],
            listData:'',
            loading:false,
            pageparm: {
                currentPage: 1,
                pageSize: 10,
                total: 10
            },
            title:1,
            FormVisible:false,
            loadingsubmit:false
        }
    },
    created(){
          this.optionClick();//获取目录
          this.getList();
    },
     methods:{
         imageClick(urls){
             var url = this.url + urls ;
             window.open(url,'_blank');
         },
         editClick(datas){   //点击编辑按钮

                this.FormVisible = true;
                this.title = 2;
                this.Form.pname=datas.pname;
                this.Form.pimage=datas.pimage;
                this.Form.cid=datas.cid;
                this.Form.pdesc=datas.pdesc;
                this.Form.marketPrice=datas.marketPrice;
                this.Form.shopPrice=datas.shopPrice;
                this.Form.pid=datas.pid;
                this.Form.isHot=datas.isHot+'';
         },
         submitForm(){ //Form数据提交
                this.$confirm('确定要保存数据吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                            this.loadingsubmit = true
                            this.$api.post("/product/updateProductByAdmin",this.Form,Response=>{
                                  if(Response.data.code == 200){
                                       this.$message.success("保存成功")
                                  }else{
                                      this.$message.error("系统出错")
                                  }
                            })
                            setTimeout(()=>{  
                                this.loadingsubmit = false
                                this.FormVisible = false
                                this.getList();
                            },500)    
                    })
         },
         getList(){      //获取数据
         this.loading =true;
            this.$api.post("/product/findProductByAdmin",this.dataSearch,Response=>{
                        this.listData=Response.data.data;
                        this.pageparm.total = Response.data.total;
                })
            setTimeout(()=>{
                this.loading =false
            },1000)
         },
         add(){
             this.clear();
             this.FormVisible = true;
             this.title = 1
         },
         // 分页插件事件
        callFather(parm) {
            this.dataSearch.page = parm.currentPage
            this.dataSearch.limit = parm.pageSize
            this.getList();
        },
        optionClick(){ //查看目录
            if(this.options.length == 0){
                this.$api.get("/category/getList",'',Response=>{
                        this.options=Response.data.data;
                })
            }
        },
        clear(){
                this.Form.pname='',
                this.Form.pimage='',
                this.Form.cid='',
                this.Form.pdesc='',
                this.Form.marketPrice='',
                this.Form.shopPrice='',
                this.Form.pid=""
               
        }
     },
}
</script>
<style scoped>
    
</style>